<template>
  <div>
    <h1>评标记录</h1>
    <ClTable
      ref="refTable"
      :table-data="recordInfoList"
      show-index
      show-selection
      :column-list="columnList"
      :filter-form-item="filterFormItem"
      :selectable="onSelectable"
    >
      <template #opt-btn="{ multipleSelection }">
        <el-button type="primary" plain :disabled="!multipleSelection.length" @click="onDelate(multipleSelection)">
          删除
        </el-button>
        <el-button type="primary" @click="onAdd">新增</el-button>
      </template>
      <template #column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="onView(row)">查看</el-button>
            <el-button link type="primary" @click="onEdit(row)">修改</el-button>
          </template>
        </el-table-column>
      </template>
    </ClTable>
    <CrudDialog v-if="hookVisible" v-model="hookVisible" :info="dialogInfo" :type="type" @at-close="onCloseDialog" />
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import CrudDialog from './CrudDialog.vue'
import { COLUMN_LIST, FILTER_FORM_ITEM } from './data'
import { recordInfoList, recordInfoRemove } from '@/api/review-record'
const columnList = ref(COLUMN_LIST)
const filterFormItem = ref(cloneDeep(FILTER_FORM_ITEM))
const refTable = ref()
const onSelectable = (row) => {
  return row.stepName !== '废标' && row.stepName !== '无效标'
}
// 评审记录 弹框
const { type, hookVisible, dialogInfo, onOpenDialog, onCloseDialog } = useDialog(refTable)
const onAdd = () => {
  type.value = '新增评审记录'
  onOpenDialog({})
}
const onView = (row) => {
  type.value = '查看评审记录'
  onOpenDialog({ ...row, isView: true })
}
// 是否是编辑 修改按钮，无效标、废标不能修改，评标记录可以修改。
const onEdit = (row) => {
  type.value = '修改评审记录'
  const isView = row.stepName === '废标' || row.stepName === '无效标'
  onOpenDialog({ ...row, isView })
}
// 删除
const onDelate = async (multipleSelection) => {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const ids = multipleSelection.map((item) => item.id)
    await recordInfoRemove(ids)
    await refTable.value.initTable()
  })
}
</script>
